<!-- 首页 -->
<template>
	<view>
		<scroll-view scroll-y="true" style="height: 200rpx;">
			<view class="coin-box">
				<view>账号余额：{{amount}}</view>
				<view class="label">充值: {{value*unit}}趣豆(1元=100趣豆)</view>
				<u-slider v-if="slider" v-model="value" block-width="40" height="12" min="5" step="5" max="100"></u-slider>
				<user-auth></user-auth>
				<view style="height: 140rpx;width: 1rpx;"></view>
			</view>
		</scroll-view>
		<view class="confrim-btn">
			<u-button size="medium" @click="cannel">取消</u-button>
			<u-button size="medium" type="primary" @click="handleHot">充值</u-button>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		slider: {
			type: Boolean,
			required: true,
			default: function() {
				return false;
			}
		},
		applyId: {
			// 动态数据
			type: String,
			required: true,
			default: function() {
				return '';
			}
		},
	},
	data() {
		return {
			unit: 100,
			show: false,
			value: 5,
			status: 'loadmore',
			isEnd: false,
			current: 1,
			pageSize: 10,
			scrollTop: 0,
			dataList: [],
			amount: 0,
		};
	},
	methods: {
		cannel() {
			this.$emit('cannel');
		},
		getAmount() {
			this.$u.get('/pay/userCoin/getAmount').then(res => {
				this.amount = res.data;
			});
		},
		handleHot() {
			var coinNum = this.value * this.unit;
			this.$u.post('/pay/coin/payNum',{
				coinNum: coinNum,
				appId: this.website.appId,
			}).then(res => {
				var that = this;
				uni.requestPayment({ 
					provider: 'wxpay',
					timeStamp: res.data.timeStamp,
					nonceStr: res.data.nonceStr,
					package: res.data.packageValue,
					signType: res.data.signType,
					paySign: res.data.paySign,
					success: function(res) {
						uni.showToast({
							title: '支付成功',
							icon:'success',
							duration: 2000
						});
						that.$emit('getAmount');
						that.cannel();
					},
					fail: function(err) {
						uni.showModal({
							title: '温馨提示',
							content: '订单尚未支付',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									
								}
							}
						});
					}
				});
			});
			
		},
	}
}; 
</script>
<style lang="scss" scoped>
	.label {
		margin-bottom: 15px;
		font-size: 14px;
		font-weight: bold;
	}
	.coin-box {
		padding: 15px;
	}
	.confrim-btn {
		padding: 15px;
		display: flex;
		justify-content: space-between;
	}
</style>
